<template>
  <div id="Flow"></div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  data() {
    return {
      graph: '',
      data: [],
      measure: [
        {
          name: '救助力量协调',
          id: 'coordinate'
        },
        {
          name: '应急物资选择',
          id: 'choose'
        },
        {
          name: '搜救区域计算',
          id: 'calculate'
        },
        {
          name: '信息发布',
          id: 'issue'
        }
      ]
    }
  },

  mounted() {
    this.data = {
      //节点
      nodes: [
        {
          id: 'dangerous',
          label: '险情接报',
          x: 80,
          y: 70
        },
        {
          id: 'message',
          label: '信息核实',
          x: 80,
          y: 170
        },
        {
          id: 'dispose',
          label: '应急处置',
          x: 80,
          y: 270
        },
        {
          id: 'conclusion',
          label: '处置总结',
          x: 80,
          y: 370
        },
        {
          id: 'assess',
          label: '应急评估',
          x: 80,
          y: 470
        },
        {
          id: 'coordinate',
          label: '救助力量协调',
          x: 200,
          y: 120
        },
        {
          id: 'choose',
          label: '应急物资选择',
          x: 200,
          y: 190
        },
        {
          id: 'calculate',
          label: '搜救区域计算',
          x: 200,
          y: 260
        },
        {
          id: 'issue',
          label: '信息发布',
          x: 200,
          y: 330
        }
      ],
      //边
      edges: [
        {
          source: 'dangerous', //起点id
          target: 'message' //目标点id
        },
        {
          source: 'message',
          target: 'dispose'
        },
        {
          source: 'dispose',
          target: 'conclusion'
        },
        {
          source: 'conclusion',
          target: 'assess'
        },
        {
          source: 'dispose',
          target: 'coordinate',
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            },
            startArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            }
          }
        },
        {
          source: 'dispose',
          target: 'choose',
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            },
            startArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            }
          }
        },
        {
          source: 'dispose',
          target: 'calculate',
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            },
            startArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            }
          }
        },
        {
          source: 'dispose',
          target: 'issue',
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            },
            startArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45
            }
          }
        }
      ]
    }
    this.graph = new G6.Graph({
      container: 'Flow', // 指定挂载点
      // 画布宽高
      width: 274,
      height: 550,
      linkCenter: true,
      //节点配置样式

      defaultNode: {
        type: 'rect',
        shape: 'polyline',
        size: [80, 30],
        style: {
          fill: '#409EFF'
        },
        labelCfg: {
          positions: 'center',
          // 节点上的标签文本样式配置
          style: {
            fill: '#fff' // 节点标签文字颜色
          }
        }
      },
      //边的样式配置
      defaultEdge: {
        type: 'line',
        // 边样式配置
        style: {
          stroke: '#409EFF', // 边描边颜色
          endArrow: {
            path: G6.Arrow.triangle(5, 5, 25), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
            d: 25,
            fill: '#409EFF',
            opacity: 0.5,
            lineWidth: 1
          },
          startArrow: {
            path: G6.Arrow.triangle(5, 5, 25), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
            d: 25,
            fill: '#409EFF',
            opacity: 0.5,
            lineWidth: 1
          }
        },
        labelCfg: {
          position: 'center'
        }
      }
    })
    //读取数据
    this.graph.data(this.data)
    // 渲染图
    this.graph.render()
    // console.log(this.data)
  },
  methods: {
    //添加节点
    addSave() {
      this.measure.push({ name: this.addinput, id: 'abc' })
      // console.log(div)
      this.data.nodes.push({
        id: this.id,
        label: this.addinput,
        x: 200,
        y: 400
      })

      // 读取数据
      this.graph.data(this.data)
      // 渲染图
      this.graph.render()
    }
  }
}
</script>
